<template>
     <div style="padding:10px;background-color: white;">
     <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="商品状态" >
                <ASelect allow-clear v-model:value="state.formData.type" :options="state.itemizeList">   
                </ASelect>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
       
        <div class="mb-10">
            <AButton type="primary"  @click="addCarousel">新增</AButton>
        </div>
        <a-table :dataSource="state.dataSource" :columns="columnRef">
            <template #bodyCell="{record,column}">
                <template v-if="column.dataIndex==='imgUrl'">
                    <a-image :width="72" :height="32" :src="record.imgUrl"></a-image>
                </template>
                <template v-if="column.dataIndex==='isShow'">
                    <span v-if="record.isShow==1">是</span>
                    <span v-if="record.isShow==0">否</span>
                </template>
                <template v-if="column.dataIndex==='type'">
                    <span v-for="(item,index) in state.itemizeList" :key="index">
                        <span v-if="item.value===record.type">{{item.label}}</span>
                    </span>
                </template>
                <template v-if="column.dataIndex==='actions'">
                    <a-popconfirm
                        title="确认执行此操作?"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="deleteItem(record)"
                    >
                        <a-button  type="text">删除</a-button>
                    </a-popconfirm>
                    <a-button type="text" @click="handleEdit(record)">编辑</a-button>
                </template>
            </template>
        </a-table>
    </div>
    <CarouselModal v-if="state.modalVisible" @ok="handleModalOk" @cancel="handleModalCancel" :current="state.currentData" ></CarouselModal>
</template>
<script lang="ts" setup>
import Search from '@/components/Search/Search.vue';
import { reactive,onMounted,ref,h } from "vue";
import CarouselModal from "./components/CarouselModal.vue";
import { CarouselService } from "@/service/carouselService";
import { CarouselTypes, ResponseVo } from "@/type";
const state = reactive<{
    formData:any,
    modalVisible: boolean,
    dataSource:CarouselTypes.CarouselItem[],
    currentData:Partial<CarouselTypes.CarouselItem>,
    itemizeList:CarouselTypes.ItemizeItem[]
}>({
    formData:{},
    modalVisible: false,
    dataSource: [],
    currentData:{},
    itemizeList:[]
});
 
const columnRef = ref([
    {title:"图片",dataIndex:"imgUrl"},
    {title:"图片位置",dataIndex:"type"},
    {title:"描述",dataIndex:"descr"},
    {title:"跳转链接",dataIndex:"pageUrl"},
    {title:"排序",dataIndex:"sort"},
    //0-隐藏 1-显示
    {title:"是否隐藏",dataIndex:"isShow"},
    {title:"修改人",customRender:({record}:{record:any})=>{
        return h('div',{},record.updator ? `${record.updator}/${record.updateTime}` : '-')
    }},
    {title:"操作",dataIndex:"actions"},
])

onMounted(()=>{
    handleSearch(); 
    handleItemizeList();
})

const handleSearch = async ()=>{
    let res:ResponseVo<CarouselTypes.CarouselItem[]> = await CarouselService.findAll(state.formData);
    if(res.code===0){
        state.dataSource = res.data;
    }
}

const handleReset = ()=>{
    state.formData = {};
}

const handleItemizeList = async()=>{
    let res:ResponseVo<CarouselTypes.ItemizeItem[]> = await CarouselService.itemizeList("APP_IMAGE");
    if(res.code===0){
        state.itemizeList = res.data;
    }
}

const deleteItem = async(record:CarouselTypes.CarouselItem)=>{
    let res:ResponseVo<any> = await CarouselService.deleteItem(record.id);
        if(res.code===0){
            handleSearch();
        }
}

const addCarousel = ()=>{
    state.currentData = {}
    state.modalVisible = true;
}

const handleModalOk = ()=>{
    state.modalVisible = false;
    handleSearch();
}

const handleModalCancel = ()=>{
    state.modalVisible = false;
    state.currentData = {};
}

const handleEdit = (record:CarouselTypes.CarouselItem)=>{
    state.modalVisible = true;
    state.currentData = record;
}


</script>